<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>找回密码</title> 
		<jsp:include page="/WEB-INF/jsp/common/styleInc.jsp"></jsp:include>
		<jsp:include page="/WEB-INF/jsp/common/scriptIncEs.jsp"></jsp:include>
		<style>
			.w260{width:260px;}  
			.see_icon{background-position: -0px -40px;}
			.see_icon:hover{background-position: -20px -40px;}
			.time_icon{width: 20px;height: 20px;background-image: url(../image/time_icon.png);cursor: pointer;background-repeat: no-repeat;}
			.margin0{margin:0 auto;}
			.input_h40{height: 16px;line-height: 16px;padding: 12px 5px;border: 1px solid #ccc;_line-height:16px;line-height: 16px\9;*+line-height: 16px;}
		</style>
		<script>
			$(function (){
				//密码动态验证
				$("#oldpassword,#newpassword,#surepassword").bind("keyup",function(event){
					equalTo();
				});
			});
			
			//密码验证
			function equalTo() {
				JO("phoneclew").innerHTML="";
				JO("oldpasswordclew").innerHTML="";
				JO("newpasswordclew").innerHTML="";
				JO("surepasswordclew").innerHTML="";
				
				var  phoneno  =  $("#phoneno").val();
				var  oldpassword  =  $("#oldpassword").val();
				var  newpassword  =  $("#newpassword").val();
				var surepassword  = $("#surepassword").val();
				
				if( oldpassword.length < 6 || oldpassword.length > 12){
					JO("oldpasswordclew").style.color= "red";
					JO("oldpasswordclew").innerHTML="新密码需要6-12位";
				}else if(oldpassword.indexOf(" ") >= 0){
					JO("oldpasswordclew").style.color= "red";
					JO("oldpasswordclew").innerHTML="密码中不能含有空格";
				}else{
					JO("oldpasswordclew").style.color= "green";
					JO("oldpasswordclew").innerHTML="验证通过";
					
					if( newpassword.length < 6 || newpassword.length > 12){
						JO("newpasswordclew").style.color= "red";
						JO("newpasswordclew").innerHTML="新密码需要6-12位";
					}else if(newpassword.indexOf(" ") >= 0){
						JO("newpasswordclew").style.color= "red";
						JO("newpasswordclew").innerHTML="新密码中不能含有空格";
					}else{
						JO("newpasswordclew").style.color= "green";
						JO("newpasswordclew").innerHTML="验证通过";
						
						if( surepassword.length < 6 || surepassword.length > 12){
							JO("surepasswordclew").style.color= "red";
							JO("surepasswordclew").innerHTML="新密码需要6-12位";
						}else if(surepassword.indexOf(" ") >= 0){
							JO("surepasswordclew").style.color= "red";
							JO("surepasswordclew").innerHTML="确认密码中不能含有空格";
						}else{
							JO("surepasswordclew").style.color= "green";
							JO("surepasswordclew").innerHTML="验证通过";
						}
					}
				}
			}
			
			function seePass(type){//使用jquery可能版本不允许修改type，这里用的js原生代码
				var inputType = JO(type+"password").getAttribute("type");
				if(inputType == "text"){
					JO(type+"password").setAttribute("type","password");
				} else {
					JO(type+"password").setAttribute("type","text");
				}
			}
			//用户点击完成修改密码
			function updateUserPsw(obj){
				$(obj).text("待实现...");
			}
	
	
			
		</script>
	</head>
	
	<body>
		<!-- 公共头文件 -->
		<div style="min-width:960px;">
			<!--找回密码-->
			<div class="pt50">
				<div class="w750  margin0 clearfix pb30">
					<span class="fl f20 ml10">找回密码</span>
					<span class="fr mt5">&gt;&gt; 已有账号？<a class="font_blue" href="<c:url value='/'/>">点此登录</a></span>
						
				</div>
				<div class="w750 margin0 bg_color_blue3 mt30 h350">
					
					<div class="p10 pt50 clearfix">
						<div class="f16 w200 tr fl mt10 mr10"><label class="color_red">*&nbsp;</label>账号：</div>
						<input class="input_h40 f14 fl w300 userreg" type="text" placeholder="请输入账号!" id="phoneno">
						<span class="font_red ml10 lh40" id="phoneclew"></span>
					</div>
					
					<div class="p10 clearfix pr">
						<div class="f16 w200 tr fl  mt10 mr10"><label class="color_red">*&nbsp;</label>原密码：</div>
						<span class="fl pr">
							<input class="input_h40 w300" type="password" maxlength="32" placeholder="英文字母、数字不小于6位" id="oldpassword">
							<span class="time_icon see_icon display_i pa" style="top:10px;right:10px;"  onclick="seePass('old')"></span>
						</span>
						<span class="font_red ml30 lh40" id="oldpasswordclew"></span>
					</div>
					<div class="p10 clearfix pr">
						<div class="f16 w200 tr fl  mt10 mr10"><label class="color_red">*&nbsp;</label>新密码：</div>
						<span class="fl pr">
							<input class="input_h40 w300" type="password" maxlength="32" placeholder="英文字母、数字不小于6位" id="newpassword">
							<span class="time_icon see_icon display_i pa" style="top:10px;right:10px;"  onclick="seePass('new')"></span>
						</span>
						<span class="font_red ml30 lh40" id="newpasswordclew"></span>
					</div>
					<div class="p10 clearfix pr">
						<div class="f16 w200 tr fl  mt10 mr10"><label class="color_red">*&nbsp;</label>确认密码：</div>
						<span class="fl pr">
							<input class="input_h40 w300" type="password" maxlength="32" placeholder="英文字母、数字不小于6位" id="surepassword">
							<span class="time_icon see_icon display_i pa" style="top:10px;right:10px;"  onclick="seePass('sure')"></span>
						</span>
						<span class="font_red ml30 lh40" id="surepasswordclew"></span>
					</div>
					<div class="tc mt30">
						<a class="btn btn_blue1 display_i f16 w150" href="javascript:void(0);" onclick="updateUserPsw(this);" style="padding: 6px 0;">完成</a>
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>